<template>
	<div class="tdesign-demo-block-column-large demo-container h-full">
		<t-table 
		rowKey="id" 
		:columns="columns" 
		:data="tableData" 
		:sort="sort" 
		bordered 
		:stripe="true"
		@sort-change="sortChange"
		row-key="index" 
		:maxHeight="'100%'"
		:pagination="{ total: tableData.length }"
		:displayColumns.sync="displayColumns"
		:columnController="{}"
		>
			<template #state="{ row }">
				<p v-if="row.state === 1" class="status">正式</p>
				<p v-if="row.state === 0" class="status warning">试用</p>
				<p v-if="row.state === 2" class="status unhealth">离职</p>
			</template>
			<template #operation="slotProps">
				<t-button variant="text" class="text-blue-700" @click="rehandleClickOp(slotProps)" v-if="isButtonAuthority('查看员工详情')">查看</t-button>
				<t-dropdown :minColumnWidth="88" @click="handleClick" trigger="click">
					<t-button variant="text" class="text-blue-700" v-if="isButtonAuthority('操作员工状态')">操作</t-button>
					<t-dropdown-menu  slot="dropdown">
						<t-dropdown-item :value="1" @click="regulaButtonClick(slotProps)" :disabled="regulaButtonDisabled(slotProps)">转正办理</t-dropdown-item>
						<t-dropdown-item :value="2" @click="leaveButtonClick(slotProps)" :disabled="leaveButtonDisabled(slotProps)">离职办理</t-dropdown-item>
						<t-dropdown-item :value="3" @click="insurance(slotProps)" :disabled="insuranceDisabled(slotProps)">保险办理</t-dropdown-item>
					</t-dropdown-menu>
				</t-dropdown>
			</template>
		</t-table>
		<!-- 保险组件 -->
		<InsuranceButton ref="InsuranceButton" :props_user_id="this.click_user_id"></InsuranceButton>
		<!-- 转正抽屉 -->
		<t-drawer 
		:visible="regulaVisible" 
		@close="regulaClose"
		:onConfirm="regulaSubmit" 
		header="转正办理">
			<div class="flex flex-col">
				<span>转正日期<span class="ml-1 text-red-800">*</span></span>
				<t-date-picker 
				class="mt-2" 
				v-model="regulaForm.regularization_date"
				placeholder="请选择转正日期"
				/>
			</div>
			<div class="mt-4">
				<span>转正工资<span class="ml-1 text-red-800">*</span></span>
				<t-input 
				class="mt-2" 
				v-model="regulaForm.official_salary"
				placeholder="请输入转正工资"
				:status="official_salary_status"
				:tips="official_salary_tips"
				:onBlur="officialSalaryTipsBlur"
				/>
			</div>
			<div class="mt-4">
				<span>转正合同</span>
				<t-upload
				class="mt-2" 
				action="http://127.0.0.1:3000/my/addPdf"
				accept="application/pdf"
				v-model="regulaFile"
				@fail="regulaFile"
				:headers="token"
				name="pdf"
				showUploadProgress :sizeLimit="{ size: 10, unit: 'MB', message: '文件大小不超过 {sizeLimit} MB' }"
				@success="regulaOnSuccess"
				/>
			</div>
		</t-drawer>
		<!-- 离职抽屉 -->
		<t-drawer 
		:visible="leaveVisible" 
		@close="leaveClose"
		:onConfirm="leaveSubmit" 
		header="离职办理">
			<div class="flex flex-col">
				<span>离职日期<span class="ml-1 text-red-800">*</span></span>
				<t-date-picker 
				class="mt-2" 
				v-model="leaveForm.leave_date"
				placeholder="请选择离职日期"
				/>
			</div>
			<div class="mt-4">
				<span>离职原因<span class="ml-1 text-red-800">*</span></span>
				<t-input 
				class="mt-2" 
				v-model="leaveForm.leave_reason"
				placeholder="请输入离职原因"
				:status="leave_reason_status"
				:tips="leave_reason_tips"
				:onBlur="leaveReasonTipsBlur"
				/>
			</div>
			<div class="mt-4">
				<span>离职证明</span>
				<t-upload
				class="mt-2" 
				action="http://127.0.0.1:3000/my/addPdf"
				accept="application/pdf"
				v-model="leaveFile"
				@fail="leaveFile"
				:headers="token"
				name="pdf"
				showUploadProgress :sizeLimit="{ size: 10, unit: 'MB', message: '文件大小不超过 {sizeLimit} MB' }"
				@success="leaveOnSuccess"
				/>
			</div>
		</t-drawer>
	</div>
</template>

<script>
	import InsuranceButton from '@/pages/User/Organization/UserInfo/InsuranceButton'
	import { toDay } from '@/unit/myDate'
	import { getToken } from '@/unit/auth'
	import { isNumber, isSpecial } from '@/unit'
	import { isButtonAuthority } from '@/unit/buttonAuthority'
	
	export default {
		name: 'UserDataList',
		components: {
			InsuranceButton
		},
		data() {
			return {
				columns: [
					{ colKey: 'id', title: '员工编号', width: 100, sortType: 'all', sorter: true },
					{ colKey: 'name', title: '员工昵称', width: 100},
					{ colKey: 'position_name', title: '岗位职称', width: 100,},
					{ colKey: 'phone', title: '联系电话', width: 100,},
					{ colKey: 'entry_date', title: '入职时间', width: 100, sortType: 'all', sorter: true },
					{ colKey: 'state', title: '岗位状态', width: 100, sortType: 'all', sorter: true },
					{ colKey: 'post_time', title: '在岗时间', width: 100, sortType: 'all', sorter: true },
					{ colKey: 'manage', title: '管理', width: 100, cell: 'operation', }
				],
				displayColumns: ['id', 'name', 'position_name', 'phone', 'entry_date', 'state', 'post_time'],
				hideSortTips: false,
				sort: {
					sortBy: 'state',
					// 是否按照降序进行排序
					descending: false,
				},
				// 转正业务
				regulaVisible: false,
				regulaForm: {
					regularization_date: '',
					official_salary: '',
					id: '',
					regularization_pdf: '',
					state: 1
				},
				official_salary_status: '',
				official_salary_tips: '',
				regulaFile: [],
				regulaLialog: null,
				// 离职业务
				leaveVisible: false,
				leaveForm: {
					leave_date: '',
					leave_reason: '',
					id: '',
					leave_pdf: '',
					state: 2
				},
				leave_reason_status: '',
				leave_reason_tips: '',
				leaveFile: [],
				leaveLialog: null,
				// 点击选中的id
				click_user_id: 0,
				
			};
		},
		computed: {
			// 获取token设置请求头
			token() {
				let obj = {
					"Authorization": getToken()
				}
				return obj
			},
			tableData(){
				let arr = []
				if(this.$store.state.user.userStateValue){
					this.$store.state.user.userInfo.map(item => {
						if(item.state != 2){
							arr.push(item)
						}
					})
				} else {
					arr = this.$store.state.user.userInfo
				}
				return arr
			}
		},
		methods: {
			// 权限审核
			isButtonAuthority(str){
				return isButtonAuthority(str)
			},
			// 保险是否可点击
			insuranceDisabled(slotProps){
				if (slotProps.row.state === 2){
					return true
				} else {
					return false
				}
			},
			// 离职是否可点击
			leaveButtonDisabled(slotProps){
				if (slotProps.row.state === 2){
					return true
				} else {
					return false
				}
			},
			// 转正是否可点击
			regulaButtonDisabled(slotProps){
				if(slotProps.row.state === 0){
					return false
				} else {
					return true
				}
			},
			// 操作按钮点击
			handleClick(data, { e }) {
				e.preventDefault();
			},
			// 封装请求用户列表数据的方法
			getUserList(){
				this.$store.dispatch('user/getUserList').then((res)=>{
					this.sortChange(this.sort)
				})
			},
			// 查看按钮
			rehandleClickOp(slotProps){
				this.$router.push({
					name: 'UserInfo',
					query: {
						id: slotProps.row.id
					}
				})
			},
			// 调用排序方法
			sortChange(sort) {
				this.sort = sort;
				this.request(sort);
			},
			// 排序方法
			request(sort) {
				const timer = setTimeout(() => {
					if (sort) {
						this.$store.state.user.userInfo = this.$store.state.user.userInfo
							.concat()
							.sort((a, b) => (sort.descending ? b[sort.sortBy] - a[sort.sortBy] : a[sort.sortBy] -
								b[sort.sortBy]));
					} else {
						this.$store.state.user.userInfo = this.$store.state.user.userInfo.concat();
					}
					clearTimeout(timer);
				}, 100);
			},
			// 保险办理
			insurance(slotProps){
				this.click_user_id = slotProps.row.id
				this.$refs.InsuranceButton.insuranceButtonClick()
			},
			// 转正抽屉状态
			setRegulaVisible(state) {
				this.regulaVisible = state
			},
			// 转正按钮点击
			regulaButtonClick(slotProps) {
				this.click_user_id = slotProps.row.id
				this.setRegulaVisible(true)
			},
			// 转正取消按钮点击
			regulaClose(){
				this.setRegulaVisible(false)
				this.official_salary_status = ''
				this.official_salary_tips = ''
			},
			// 转正确认按钮点击
			regulaSubmit() {
				if (!this.officialSalaryTipsBlur()){
					this.$message.error('请检查转正工资是否按要求填写')
					return
				}
				this.regulaForm.id = this.click_user_id
				// 判断用户是否提交上传了转正pdf，如果没上传，弹出弹窗做最后一次提示，如果上传了，直接提交
				if (this.regulaForm.regularization_pdf === ''){
					if (this.regulaLialog) {
						this.regulaLialog.show();
						return;
					}
					this.regulaLialog = this.$dialog({
						header: 'Dialog-Plugin',
						body: '转正合同未添加，是否确认转正提交',
						className: 't-dialog-new-class1 t-dialog-new-class2',
						style: 'color: rgba(0, 0, 0, 0.6)',
						onConfirm: ({ e }) => {
							delete this.regulaForm.regularization_pdf
							console.log(this.regulaForm)
							this.$store.dispatch('user/regularization', this.regulaForm).then((res) => {
								if (res.status === 0){
									this.$message.success(res.message)
								} else {
									this.$message.error(res.message)
								}
								this.regulaLialog.hide()
								this.setRegulaVisible(false)
								this.getUserList()
							})
						},
					});
				} else {
					this.$store.dispatch('user/regularization', this.regulaForm).then((res) => {
						if (res.status === 0){
							this.$message.success(res.message)
						} else {
							this.$message.error(res.message)
						}
						this.setRegulaVisible(false)
						this.getUserList()
					})
				}
			},
			// 转正合同上传成功
			regulaOnSuccess(context) {
				if (context.response.status == 0) {
					this.regulaForm.regularization_pdf = context.response.data
					this.$message.success(context.response.message)
				} else {
					this.$message.error(context.response.message)
				}
			},
			// 转正工资校验
			officialSalaryTipsBlur(){
				if(this.regulaForm.official_salary === ''){
					this.official_salary_status = 'error'
					this.official_salary_tips = '转正工资是必填项'
					return false
				} else {
					if(!isNumber(this.regulaForm.official_salary)){
						this.official_salary_status = 'error'
						this.official_salary_tips = '只能填数字'
						return false
					} else {
						this.official_salary_status = ''
						this.official_salary_tips = ''
						return true
					}
				}
			},
			// 离职抽屉状态
			setLeaveVisible(state) {
				this.leaveVisible = state
			},
			// 离职按钮点击
			leaveButtonClick(slotProps) {
				this.click_user_id = slotProps.row.id
				this.setLeaveVisible(true)
			},
			// 离职取消按钮点击
			leaveClose(){
				this.setLeaveVisible(false)
				this.leave_reason_status = ''
				this.leave_reason_tips = ''
			},
			// 离职确认按钮点击
			leaveSubmit() {
				if (!this.leaveReasonTipsBlur()){
					this.$message.error('请检查离职原因是否按要求填写')
					return
				}
				this.leaveForm.id = this.click_user_id
				// 判断用户是否提交上传了离职pdf，如果没上传，弹出弹窗做最后一次提示，如果上传了，直接提交
				if (this.leaveForm.leave_pdf === ''){
					if (this.leaveLialog) {
						this.leaveLialog.show();
						return;
					}
					this.leaveLialog = this.$dialog({
						header: '提示',
						body: '离职证明未添加，是否确认离职提交',
						className: 't-dialog-new-class1 t-dialog-new-class2',
						style: 'color: rgba(0, 0, 0, 0.6)',
						onConfirm: ({ e }) => {
							delete this.leaveForm.leave_pdf
							this.$store.dispatch('user/leave', this.leaveForm).then((res) => {
								if (res.status === 0){
									this.$message.success(res.message)
								} else {
									this.$message.error(res.message)
								}
								this.leaveLialog.hide()
								this.setLeaveVisible(false)
								this.getUserList()
							})
						},
					});
				} else {
					this.$store.dispatch('user/leave', this.leaveForm).then((res) => {
						if (res.status === 0){
							this.$message.success(res.message)
						} else {
							this.$message.error(res.message)
						}
						this.setLeaveVisible(false)
						this.getUserList()
					})
				}
			},
			// 离职证明上传成功
			leaveOnSuccess(context) {
				if (context.response.status == 0) {
					this.leaveForm.leave_pdf = context.response.data
					this.$message.success(context.response.message)
				} else {
					this.$message.error(context.response.message)
				}
			},
			// 离职原因校验
			leaveReasonTipsBlur(){
				if(this.leaveForm.leave_reason === ''){
					this.leave_reason_status = 'error'
					this.leave_reason_tips = '离职原因是必填项'
					return false
				} else {
					if(!isSpecial(this.leaveForm.leave_reason)){
						this.leave_reason_status = 'error'
						this.leave_reason_tips = '请不要输入特殊字符'
						return false
					} else {
						this.leave_reason_status = ''
						this.leave_reason_tips = ''
						return true
					}
				}
			},
		},
		mounted() {
			this.getUserList()
			// 赋予默认值
			this.regulaForm.regularization_date = toDay()
			this.leaveForm.leave_date = toDay()
			// 权限管理，当一项操作选项都没有的时候不显示操作列
			if(isButtonAuthority('查看员工详情')){
				this.displayColumns.push('manage')
			} else {
				if(isButtonAuthority('操作员工状态')){
					this.displayColumns.push('manage')
				}
			}
		}
	};
</script>
<style lang="less">
	/deep/ [class*='t-table-expandable-icon-cell'] .t-icon {
		background-color: transparent;
	}

	.demo-container {
		.title {
			font-size: 14px;
			line-height: 28px;
			display: block;
			margin: 10px 0;

			i {
				font-style: normal;
			}
		}

		.status {
			position: relative;
			color: #00a870;
			margin-left: 10px;

			&::before {
				position: absolute;
				top: 50%;
				left: 0;
				transform: translateY(-50%);
				content: '';
				background-color: #00a870;
				width: 6px;
				height: 6px;
				margin-left: -10px;
				border-radius: 50%;
			}
		}

		.status.unhealth {
			color: #e34d59;

			&::before {
				background-color: #e34d59;
			}
		}

		.status.warning {
			color: #ed7b2f;

			&::before {
				background-color: #ed7b2f;
			}
		}
	}
	
	.formList-enter-active{
		animation: formStart 1s
	}
	
	.formList-leave-active{
		animation: formEnd 1s
	}
	
	@keyframes formStart {
		from{
			opacity: 0;
			transform: translateY(-10%)
		}
		to {
			opacity: 1;
			transform: translateY(0)
		}
	}
	
	@keyframes formEnd {
		from{
			opacity: 1;
			transform: translateX(0);
		}
		to{
			opacity: 0;
			transform: translateX(-100%);
		}
	}
</style>
